
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Stuttgart Monopoly!</title>
    <link href="style_spielfeld.css" type="text/css" rel="stylesheet">
    <script type='text/javascript' src="http://code.jquery.com/jquery-1.5.1.min.js"> </script>
    </head>
        
                                                 
                                         
    <body>
    <div id="würfel">

        
<div id="wuerfel">
<img src="wuerfel1.jpg" name="wuerfel" />
<img src="wuerfel1.jpg" name="wuerfel1" />

<button id="buttonDice">Würfeln!</button>
 
</div>       

<br />
        </div>
                         <div id="kontostaende">Aktuelle Kontostände:</div>
   <script type="text/javascript">

resObjekt = new XMLHttpRequest();


resObjekt.open('get','/StuttgartMonopoly/rest/kontostaende',true);
resObjekt.onreadystatechange = handleResponse;
resObjekt.send(null);

function handleResponse() {
	   var content="<table id='balance' border = '1' > <tr><th>Spieler</th><th>Kontostand</th></tr>";
	   if(resObjekt.readyState== 4) {
			var meinJSONobjekt = eval( "("+ resObjekt.responseText + ")"); 
			for(var i=0; i<meinJSONobjekt.length;i++) {
				content+="<tr><td>" + meinJSONobjekt[i].playername + "</td><td id='tdlast'>" + meinJSONobjekt[i].balance + "</td></tr>";
			}
	       document.getElementById("gamesdiv").innerHTML=content;
	   }    
}
</script>

<div>
    <img class="displayed" src="MonopolySpielfeld.jpg">
</div>

    <div id="top">

     </div>  

    <button id="go">Ziehen</button>
        
<div id="block">
    <img class="rot" src="Spielfigur_Rot.png">
    </div>
 
        

<script> 

   

   
  $(function(){  
   var i;
var face = new Array();
for(i=0;i<6;i++) {
   face[i] = new Image();
   face[i].src="wuerfel" + (i+1) + ".jpg";
}
var ii;
var face = new Array();
for(ii=0;ii<6;ii++) {
   face[ii] = new Image();
   face[ii].src="wuerfel1" + (ii+1) + ".jpg";
}


        
$( "#buttonDice" ).click(
    function(){
   var randomdice=Math.ceil(Math.random()*6);
   document.images["wuerfel"].src=eval("face["+randomdice+"].src")
   var randomdice2=Math.ceil(Math.random()*6);
document.images["wuerfel1"].src=eval("face["+randomdice2+"].src")
position = randomdice + randomdice2 +2;
//        alert(position);
});
  });

 
 
 
 $(function(){
     
    counter = 0;
/*Feld               0    1    2   3    4    5    6    7    8    9    10   11   12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33   34   35   36   37   38   39   40 */  
     var topField=[560, 560, 560, 560, 560, 560, 560, 560, 560, 560, 560, 560, 510, 460, 410, 355, 305, 255, 200, 150,  95,  40,  40,  40,  40,  40,  40,  40,  40,  40,  40,  40,  95, 150, 200, 255, 305, 355, 410, 460, 510];
    var leftField=[910, 910, 855, 800, 750, 700, 650, 595, 540, 490, 440, 380, 380, 380, 380, 380, 380, 380, 380, 380, 380, 380, 440, 490, 540, 595, 650, 700, 750, 800, 855, 910, 910, 910, 910, 910, 910, 910, 910, 910, 910];
     console.log(leftField[counter]);
     console.log(topField[counter]);
     
     
 $( "#go" ).click(function() {

var ftop = topField[counter];
var fleft = leftField[counter];
 
   
$('#block').animate({
        left: fleft,
        top: ftop
      }, 500, function() {
        // Animation complete.
      });
  

     
counter ++;
});
});   

</script>
 
 
    </body>


</html>